<template>
<div v-show="disPlayFlag">
    <div>
      <div class="adzz-pr">
          <div class="filter-container" style="padding-bottom:0px;">
              <el-row :gutter="10">
                  <el-col :span="12">
                      <el-form label-width="85px" label-position='right' size="small">
                          <el-form-item label="负责人类型">
                              <el-select clearable v-model="listQuery.condition.managerType.value">
                                  <el-option v-for="item in orgManagerOptions" :key="item.key" :label="item.display_name" :value="item.key" >
                                  </el-option>
                              </el-select>
                          </el-form-item>
                      </el-form>
                  </el-col>
                  <el-col :span="8" :offset="3" style="float:right;">
                      <el-button size="small" class="filter-item addzz-pr-table-btn" type="primary" @click="getList">查 询</el-button>
                      <el-button size="small" class="filter-item addzz-pr-table-btn" type="primary" @click="handleReset" style="margin-left:10px;">重 置</el-button>
                      <el-button size="small" class="filter-item addzz-pr-table-btn" type="primary" @click="handleDelete">删 除</el-button>
                      <el-button size="small" class="filter-item addzz-pr-table-btn" type="primary" @click="handleCreate">添 加</el-button>
                  </el-col>
              </el-row>
          </div>
      </div>
      <div class="addzz-pr-table">
          <el-table ref="multipleTable" :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
              <el-table-column type="selection" width="35">
              </el-table-column>
              <el-table-column align="center" label="负责人类型" min-width="200px" prop="mgrIndex">
                  <template slot-scope="scope">
                          <span>{{scope.row.managerType | orgManagerFilter }}</span>
                      </template>
              </el-table-column>
              <el-table-column align="center" label="姓名" min-width="160px" prop="userinfoIdOzOrgUserinfoName">
                  <template slot-scope="scope">
                          <span>{{scope.row.userinfoIdOzOrgUserinfoName}}</span>
                      </template>
              </el-table-column>
          </el-table>
          <div class="pagination-container">
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
          </div>
      </div>



        <el-dialog title="设置部门负责人" :visible.sync="dialogTableVisible1" width="80%" :before-close="handleDialogClose">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>设置部门负责人</span>
                </div>
                <div>
                    <el-form :rules="rules" ref="targetForm" :model="temp" label-width="150px" label-position='right' size="small">
                        <el-row :gutter="5">
                            <el-col :span="8">
                                <el-form-item label="人员ID" prop="userinfoName" size='small'>
                                    {{temp.userinfoName}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">
                                <el-button class="filter-item" type="primary" @click="handleSelectUser">选 择</el-button>
                            </el-col>
                        </el-row>
                        <el-form-item label="管理类型" prop="managerType" size='small'>
                            <el-select clearable v-model="temp.managerType" placeholder="管理类型">
                                <el-option v-for="item in orgManagerOptions" :key="item.key" :label="item.display_name" :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="排序号" prop="mgrIndex" size='small'>
                            <el-input v-model="temp.mgrIndex"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-row>
                        <el-button size="small" class="filter-item" type="primary" @click="handleDialogSave">保 存</el-button>
                        <el-button size="small" class="filter-item" type="primary" @click="handleDialogClose">关 闭</el-button>
                    </el-row>
                </div>
            </el-card>
            <el-dialog title="人员选择" :visible.sync="dialogTableVisible2" width="80%" append-to-body :before-close="closeUserSelect">
                <user-select :displayFlag="userSelectDisplayFlag" @closeMe="closeUserSelect"></user-select>
            </el-dialog>
        </el-dialog>


    </div>
</div>
</template>

<script>
import {
  insertItem,
  compositeSelect,
  batchDeleteItem
} from '@/api/systemManage/tabPaneOrgPrincipal'
import {
  orgManagerOptions,
  orgManagerKeyValue
} from '@/utils/allOptions'
import userSelect from '@/components/common/userSelect'
export default {
  components: {
    userSelect
  },
  directives: {},
  props: {
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    targetOrgId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // -------Options-----------
      orgManagerOptions,
      // -------Options-----------
      // table list
      tableKey: 0,
      list: null,
      listQuery: {
        rowBounds: {
          offset: 1,
          limit: 20
        },
        condition: {
          ouinfoId: {
            'property': 'ouinfoId',
            'value': this.targetOrgId,
            'type': 'EQ'
          },
          managerType: {
            'property': 'managerType',
            'value': '',
            'type': 'EQ'
          }
        },
        fields: [
          'id',
          'managerType',
          'userinfoIdOzOrgUserinfoName'
        ],
        sort: [{
          direction: 'ASC',
          property: 'mgrIndex'
        }]
      },
      total: null,
      listLoading: false,
      // table list
      userSelectDisplayFlag: false,
      temp: {
        id: '',
        userinfoName: '',
        managerType: '',
        mgrIndex: '',
        userinfoId: ''
      },
      rules: {
        userinfoName: [{
          required: true,
          message: '请选择人员',
          trigger: 'blur'
        }],
        managerType: [{
          required: true,
          message: '请选择管理类型',
          trigger: 'blur'
        }],
        mgrIndex: [{
          required: true,
          message: '请输入排序号',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 10,
          message: '长度在 0 到 10 个字符',
          trigger: 'blur'
        },
        {
          max: 10,
          message: '最大 10 个字符',
          trigger: 'blur'
        }
        ]
      },
      dialogTableVisible1: false,
      dialogTableVisible2: false
    }
  },
  // 画面刚进入method
  mounted() {
    if (this.disPlayFlag) {
      this.getList()
    }
  },
  filters: {
    orgManagerFilter(target) {
      return orgManagerKeyValue[target]
    }
  },
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        console.log('tabPaneOrgPrincipal-targetOrgId', this.targetOrgId)
        if (this.disPlayFlag) {
          this.getList()
        } else {
          this.handleReset()
        }
      },
      immediate: true
    }
  },
  methods: {
    handleCreate() {
      this.dialogTableVisible1 = true
    },
    closeUserSelect(userId, userName) {
      this.temp.userinfoName = userName
      this.temp.userinfoId = userId
      this.dialogTableVisible2 = false
      this.userSelectDisplayFlag = false
    },
    // 检索条件框回车键按下后，跳转到首页
    handleFilter() {
      this.listQuerypage = 1
      this.getList()
    },
    // 翻页器使用
    handleSizeChange(val) {
      this.listQuerypage = 1
      this.listQuery.rowBounds.limit = val
      this.getList()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.listQuerypage = val
      this.listQuery.rowBounds.offset =
                this.listQuery.rowBounds.limit * (val - 1) + 1
      this.getList()
    },
    handleDelete() {
      const selectArr = this.$refs.multipleTable.selection
      if (selectArr && selectArr.length === 0) {
        return
      }
      this.$confirm(
        '此操作将删除关联用户信息, 是否继续?',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          const condition = []
          for (const temp of selectArr) {
            condition.push({
              'id': temp.id
            })
          }
          batchDeleteItem(condition).then(response => {
            this.$message({
              message: '删除成功。',
              type: 'success'
            })
            this.handleReset()
          })
        })
        .catch(error => {
          console.error(error)
        })
    },
    getList() {
      this.listLoading = true
      const that = this
      compositeSelect(this.listQuery).then(response => {
        const records = response.data.data.records
        const editlist = new Array(0)
        if (response.data.data.count > 0) {
          for (const item of records) {
            const input = {}
            for (const elem of that.listQuery.fields.values()) {
              input[elem] = item[elem]
            }
            editlist.push(input)
          }
        }
        this.list = editlist
        this.total = response.data.data.count
        this.listLoading = false
      })
    },
    handleReset() {
      this.listQuery.condition.managerType.value = ''
      this.getList()
    },
    handleSelectUser() {
      this.dialogTableVisible2 = true
      this.userSelectDisplayFlag = true
    },
    handleDialogSave() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          const targetData = {
            'mgrIndex': this.temp.mgrIndex,
            'ouinfoId': this.targetOrgId,
            'userinfoId': this.temp.userinfoId,
            'managerType': this.temp.managerType
          }
          insertItem(targetData).then(response => {
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
          this.resetDialog()
          this.dialogTableVisible1 = false
          this.handleReset()
        }
      })
    },
    handleDialogClose() {
      this.resetDialog()
      this.dialogTableVisible1 = false
    },
    resetDialog() {
      this.$refs.targetForm.clearValidate()
      this.temp = {
        id: '',
        userinfoName: '',
        managerType: '',
        mgrIndex: '',
        userinfoId: ''
      }
    }
  }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.box-card {
    width: 100%;
}

.el-button--mini,
.el-button--mini.is-round {
    padding: 3px 5px;
}
</style>
